<!DOCTYPE html>
<!-- saved from url=(0034)http://sinooceanlas.com/list/cid/5 -->
<html lang="en" style="font-size: 40px;">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


	<title>资产展示</title>
	<meta name="keywords" content="河北省企业投资理财协会">
	<meta name="description" content="河北省企业投资理财协会">

	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

	<meta name="format-detection" content="telephone=no">

	<meta name="apple-mobile-web-app-capable" content="yes">

	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<meta name="referrer" content="never">

	<link rel="stylesheet" href="./comment/layui.css">

	<link rel="stylesheet" type="text/css" media="screen and (min-width:320px) and (max-width:760px)" href="./comment/phone.css">

	<link rel="stylesheet" type="text/css" media="screen and (min-width:760px) and (max-width:3600px)" href="./comment/pc.css">

	<link rel="stylesheet" type="text/css" href="./comment/reset.css">

	<link rel="stylesheet" type="text/css" href="./comment/animate.css">

	<link rel="stylesheet" type="text/css" href="./comment/swiper.min.css">

	<script type="text/javascript" src="./comment/rem.js"></script>

	<link id="layuicss-layer" rel="stylesheet" href="./comment/layer.css" media="all">
</head>

<body style="font-size: 12px;">



	<!-- 公共导航 go -->
	<div id="app">
		<my-header></my-header>
		<div class="gg_ban">
			<img src="./img/bcg_top_2.JPG">
			<div class="wow zoomIn" style="visibility: visible; animation-name: zoomIn;">
			</div>
		</div>

		<div class="wow flipInY pro_one" style="visibility: visible; animation-name: flipInY;">
			<div class="pro_one_n">
				<form>
					<div style="border-radius: 5px;">
						<select @change="provinceChange" name="province">
							<option value="">请选择省份</option>
							<option value="">全部</option>
							<option v-for="(item,index) in provinceList" :key="index" :value="item.province_id">{{item.province_name}}</option>
						</select>
						<!-- <img src="./comment/icon28.png"> -->
					</div>
					<div style="border-radius: 5px;">
						<select @change="cityChange" name="yuanqu">
							<option v-if="!chenked" value="">请选择城市</option>
							<template v-else>
								<option value="">全部</option>
								<option v-for="(item,index) in cityList" :key="index" :value="item.city_id">{{item.city_name}}</option>
							</template>
						</select>
						<!-- <img src="./comment/icon28.png"> -->
					</div>
					<!-- <div style="border-radius: 5px;">
                        <select @change="countChange" name="yuanqu">
							<option v-if="!chenked" value="">请选择地区</option>
							<template v-else>
								<option value="">全部</option>
                            	<option v-for="(item,index) in countyList" :key="index" :value="item.county_id">{{item.county_name}}</option>
							</template>
                        </select>
                        <img src="./comment/icon28.png">
                    </div> -->

					<div class="pro_one_ss" style="border-radius: 5px;">
						<select @change="landChange" name="yuanqu">
							<option v-if="!chenkedLand" value="">请选择资产类别</option>
							<option value="">全部</option>
							<option value="1">物权资产</option>
							<option value="2">股权资产</option>
							<option value="3">债权资产</option>
							<option value="4">未确定</option>
						</select>
						<!-- <img src="./comment/icon28.png"> -->
					</div>
					<div class="pro_one_ss" style="border-radius: 5px;">
						<select @change="xingshiChange" name="yuanqu">
							<option v-if="!chenkedxingshi" value="">请选择合作形式</option>
							<option value="">全部</option>
							<option value="1">租赁</option>
							<option value="2">买卖</option>
							<option value="3">其他</option>

						</select>
						<!-- <img src="./comment/icon28.png"> -->
					</div>
					<div class="pro_one_ss" style="border-radius: 5px;">
						<input v-model="form.name" type="text" name="keyword" placeholder="输入名字" value="">
					</div>
					<button @click="serach" style="border-radius: 5px;">搜索</button>
				</form>

			</div>
		</div>

		<div class="ne_one">
			<div class="wow bounceInDown com_one_t" style="visibility: visible; animation-name: bounceInDown; margin-top: 20px;">
				<p>资产总览</p>
				<p>Overview of Assets</p>
				<span></span>
			</div>
			<div class="ne_one">

				<div class="ne_one_c wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
					<ul>
						<li style="border: 1px solid #eee;border-radius: 6px;" v-for="item in dataSource" :key="item.id">
							<a @click="toDetile(item)">
								<div class="ne_one_c_a">
									<img :src="gloabImageUrl+ item.image_list[0]+'?x-oss-process=image/resize,p_30'" alt="">
								</div>
								<div class="descripe-assetshow">
									<h6>名称：{{item.name}}</h6>
									<h6>发布时间：{{item.create_time}}</h6>
									<h6>资产性质：{{item.land_nature_text}}</h6>
									<h6>合作形式：{{item.mode_text}}</h6>
									<h6>所在地区：{{item.province_name+item.city_name+item.county_name}}</h6>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div v-if="dataSource.length" class="gg_page">
					<ul>
						<ul class="pagination">
							<li @click="currentPage <= 1?'':changePage(currentPage - 1)" :disabled="currentPage <= 1" class="disabled"><span>«</span>
							</li>
							<li v-for="page in pages" :key="page" @click="changePage(page)" :class="{ active: currentPage === page }"><span>{{page}}</span></li>
							<li @click="currentPage >= totalPages?'':changePage(currentPage + 1)" :disabled="currentPage >= totalPages"><span>»</span></li>
						</ul>
					</ul>
				</div>
			</div>
		</div>
		<my-footer></my-footer>
	</div>
	<script type="text/javascript" src="./comment/jquery-2.1.4.min.js"></script>
	<script src="./js/vue.js"></script>
	<script src="js/comment.js"></script>
	<script type="text/javascript" src="./comment/layer.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				chenked: false,
				chenkedLand: false,
				chenkedxingshi: false,
				form: {
					mode: '',
					land_nature: '',
					area: ''
				},
				dataSource: [],
				// 分页
				totalPage: 0,
				pageSize: 10,
				currentPage: 1,
				maxVisibleButtons: 10,
				provinceList: [],
				cityList: [],
				countyList: [],
				provinceId: '',
				cityId: '',
				countyId: '',
				userinfo: {}
			},
			computed: {
				totalPages() {
					return Math.ceil(this.totalPage / this.pageSize)
				},
				pages() {
					const range = []
					const half = Math.floor(this.maxVisibleButtons / 2)
					let start = Math.max(1, this.currentPage - half)
					let end = Math.min(this.totalPages, start + this.maxVisibleButtons - 1)

					if (end - start + 1 < this.maxVisibleButtons) {
						start = Math.max(1, end - this.maxVisibleButtons + 1)
					}

					for (let i = start; i <= end; i++) {
						range.push(i)
					}
					return range
				}
			},
			mounted() {
				let userinfoStr = localStorage.getItem('userinfo')
				this.userinfo = JSON.parse(userinfoStr)
				document.getElementById('assetShowPage').classList.add('gg_nav_r_r_ac')
				this.getData()
				this.getProvince()
			},
			methods: {
				landChange(e) {
					this.chenkedLand = true
					this.form.land_nature = e.target.value
				},
				xingshiChange(e) {
					this.chenkedxingshi = true
					this.form.mode = e.target.value
				},
				toDetile(item) {
					window.location.href = './assetsShowDetile.html?id=' + item.id
				},
				changePage(page) {
					this.currentPage = page
					if (page >= 1 && page <= this.totalPages) {
						this.getData()
					}
				},
				serach() {
					event.preventDefault()
					this.getData()
				},
				getData() {
					let pageData = {
						page: this.currentPage,
						limit: this.pageSize,
						land_nature: this.chenkedLand ? this.form.land_nature : '',
						mode: this.chenkedxingshi ? this.form.mode : '',
						name: this.form.name ? this.form.name : '',
						province_id: this.chenked ? this.provinceId : '',
						city_id: this.chenked ? this.cityId : '',
						county_id: this.chenked ? this.countyId : "",
					}

					const that = this
					var indexlayer = layer.load(2);
					let token = that.userinfo && that.userinfo.token ? that.userinfo.token : ''
					$.ajax({
						type: 'get',
						url: gloabApi + "/Property/getList",
						data: pageData,
						headers: {
							token: token
						},
						dataType: 'json',
						success: function(res) {
							if (res.code == 1) {
								console.log((res))
								localStorage.setItem('isAdmin', res.data.is_sup_user)
								that.dataSource = res.data.list
								that.totalPage = res.data.total
							} else {
								layer.msg(res.msg);
							}
							layer.close(indexlayer);
						},
					})
				},
				provinceChange(e) {
					if (e.target.value === '') {
						this.chenked = false
					} else {
						this.chenked = true
					}
					this.provinceId = e.target.value
					this.getCityList(this.provinceId)
				},
				cityChange(e) {
					this.cityId = e.target.value
					this.getCountyList(this.cityId)
				},
				countChange(e) {
					this.countyId = e.target.value
				},
				getProvince() {
					const that = this
					// var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Common/getProvinceList",
						data: {},
						dataType: 'json',
						success: function(res) {
							if (res.code == 1) {
								console.log((res))
								that.provinceList = res.data
								// that.provinceId = res.data[0].province_id
								that.getCityList(that.provinceId)
							} else {
								// layer.msg(res.msg);
							}
							// layer.close(indexlayer);
						},
					})
				},
				getCityList(provinceId) {
					const that = this
					// var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Common/getCityList",
						data: {
							province_id: provinceId
						},
						dataType: 'json',
						success: function(res) {
							if (res.code == 1) {
								console.log((res))
								that.cityList = res.data
								// that.cityId = that.cityList[0].city_id
								that.getCountyList(that.cityId)
							} else {
								// layer.msg(res.msg);
							}
							// layer.close(indexlayer);
						},
					})
				},
				getCountyList(cityId) {
					const that = this
					// var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Common/getCountyList",
						data: {
							city_id: cityId
						},
						dataType: 'json',
						success: function(res) {
							if (res.code == 1) {
								console.log((res))
								that.countyList = res.data
								// that.countyId = res.data[0].county_id
							} else {
								// layer.msg(res.msg);
							}
							// layer.close(indexlayer);
						},
					})
				},
			}
		})
	</script>
	<script src="./js/login.js"></script>
	<script type="text/javascript" src="./comment/layui.js"></script>
	<script type="text/javascript" src="./comment/index.js"></script>
	<script type="text/javascript" src="./comment/wow.min.js"></script>
</body>

</html>